<template>
	<view>
		<uni-drawer ref="fliter" mode="right">
			<view>
				<view class="uni-title title">{{$t('baseCommon.other.filter')}}</view>
				<view class="condition">
					<view class="conmenus">
						<view class="conleft">位置编码</view>
						<view class="conright">
							<input :placeholder="$t('baseCommon.message.pleaseEnter', { title: '' })" v-model="locaNo"/>
						</view>
					</view>
					<view class="conmenus">
						<view class="conleft">设备位置</view>
						<view class="conright">
							<input :placeholder="$t('baseCommon.message.pleaseEnter', { title: '' })" v-model="locaName"/>
						</view>
					</view>
					<view class="conmenus">
						<view class="conleft">资产名称</view>
						<view class="conright">
							<input :placeholder="$t('baseCommon.message.pleaseEnter', { title: '' })" v-model="assetName"/>
						</view>
					</view>
				</view>
				<view class="button-groups">
					<button @click="doQuery">{{$t('baseCommon.buttons.search')}}</button>
					<button @click="doClear">{{$t('baseCommon.buttons.reset')}}</button>
				</view>
			</view>
		</uni-drawer>
		
		<mescroll-body bottom="60px" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="uni-list list">
				<radio-group @change="radioChange">
					<label class="uni-list-cell uni-list-cell-pd" v-for="item in list" :key="item.id">
						<view class="radio-cell">
							<radio :value="item.id" :checked="item.id === checkedItem.id" />
						</view>
						<view>
							<view class="item-content">
								<view class="item-detail"><strong>设备资产编码：</strong>{{ item.assetId }}</view>
								<view class="item-detail"><strong>设备资产名称：</strong>{{ item.assetName }}</view>
								<view class="item-detail"><strong>设备位置编码：</strong>{{ item.locaId }}</view>
								<view class="item-detail"><strong>设备位置名称：</strong>{{ item.locaName }}</view>
							</view>
						</view>
					</label>
				</radio-group>
			</view>
		</mescroll-body>
		
		<view class="btn-view">
			<button @click="doSure">{{$t('baseCommon.buttons.confirm')}}</button>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"
	import { getEquipmentLocation } from '@/api/base/equipment.js'
	
	export default {
		mixins: [MescrollMixin], 
		data() {
			return {
				locaNo: '',
				locaName: '',
				assetName: '',
				list: [],
				checkedItem: {}
			}
		},
		onLoad() {
			
		},
		methods: {
			downCallback() {
				this.mescroll.resetUpScroll()
			},
			upCallback(page) {
				let pager = {
					start: page.num,
					limit: page.size
				}
				let params = []
				params.push({
					key: 'Q^loca_no^SL',
					value: this.locaNo
				})
				params.push({
					key: 'Q^loca_name^SL',
					value: this.locaName
				})
				params.push({
					key: 'Q^asset_name^SL',
					value: this.assetName
				})
				
				getEquipmentLocation(pager, params).then(res=>{
					let curPageData = res.data.dataResult
					let curPageLen = curPageData.length
					let totalSize = res.data.pageResult.totalCount
					//设置列表数据
					if(page.num == 1) this.list = [] //如果是第一页需手动置空列表
					this.list = this.list.concat(curPageData) //追加新数据
					
					this.mescroll.endBySize(curPageLen, totalSize) 
				})
			},
			doQuery() {
				this.$refs.fliter.close()
				this.mescroll.resetUpScroll()
			},
			doClear() {
				this.locaNo = ""
				this.locaName = ""
				this.assetName = ""
			},
			radioChange(e) {
				for (let i = 0; i < this.list.length; i++) {
					if (this.list[i].id === e.target.value) {
						this.checkedItem = this.list[i];
						break;
					}
				}
			},
			doSure() {
				var pages = getCurrentPages();
				var prevPage = pages[pages.length - 2]; //上一个页面
				prevPage.$vm.reciveAsset(this.checkedItem);
				uni.navigateBack();
			}
		},
		onNavigationBarButtonTap(e) {
			this.$refs.fliter.open()
		}
	}
</script>

<style lang="scss">
	@import '@/static/style/common-detail.scss';
	
	.title {
		padding: 30rpx 0 0 30rpx;
	}
	
	.list {
		background-color: #fff;
	}
	
	.radio-cell {
		padding-left: 20px; 
		width: 15%;
	}
	
	.uni-list-cell {
	    display: flex;
	    align-items: center;
		border-bottom: 1px solid #ebedf0;
		padding: 10px;
	}
	
	.item-content {
		width: 100%;
	}
	
	.item-detail {
	    line-height: 24px;
	    font-size: 14px;
	}
	
	.btn-view {
		padding: 16rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		z-index: 100;
		background-color: #F1F1F1;
		
		button {
			background-color: #1E91E6;
			font-size: 16px;
			color: #fff;
		}
	}
	
	.button-groups {
		padding: 16rpx 8rpx;
		display: flex;
		position: fixed;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		z-index: 100;
	
		button {
			flex-grow: 1;
			margin: 0 8rpx;
			font-size: 16px;
		}
	
		button:nth-child(1) {
			width: 40%;
			background-color: #1E91E6;
			color: #fff;
		}
	
		button:nth-child(2) {
			width: 40%;
		}
	}
</style>
